<template>
	<view style="padding-left: 30rpx;">
		<view style="height: 20rpx;"></view>
		<view style="display: flex;flex-wrap: wrap;">
			<view class="label" :class="item==select?'active':''" v-for="item,index in labelList" :key="index"
				@click="changeLabel(item)">
				<text>{{item}}</text>
			</view>
		</view>
		<view style="height: 20rpx;background: #F9F9F9;"></view>
		<view style="height: 20rpx;"></view>
	
			<view style="display: flex;flex-wrap: wrap;">
				<view @click="sItemClick(item)" v-for="(item,index) in commonPathList" :key="index">
					<view class="sItem flex-row-center">
						<view class="sItem1 ">
							{{item.start_name}}
						</view>
						<image src="/static/index/jt.png" style="width: 24rpx;margin: 0 6rpx;" mode="widthFix">
						</image>
						<view class="sItem1 ">
							{{item.end_name}}
						</view>
					</view>
				</view>
			</view>
		
		<view style="color: #797979;text-align: center;font-size: 26rpx;padding: 20rpx;">--- 没有更多了 ---</view>
	</view>
</template>

<script>
	import {
		getCityList,
		path
	} from '@/api/index.js'
	export default {
		data() {
			return {
				// 顺风车模块数据
				tailwindQdInfo: {
					id: '',
					city: '',
				
				},
				tailwindZdInfo: {
					id: '',
					city: '',
				},
				commonPathList:[],
				first:'',
				type: '', // 选终点或起点
				select: '全部',
				params: {
					start_id: 0
				},
				orginCityList: {},
				labelList: ['全部', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
					'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				cityList: {}
			}
		},
		onLoad(options) {
			// this.type = options.type
			// if (options.start_id) {
			// 	this.params.start_id = options.start_id
			// }
			this.getCityList()
		},
		methods: {
			sItemClick(item){
				this.tailwindQdInfo.id = item.start_location_id
				this.tailwindQdInfo.city = item.start_name
				this.tailwindZdInfo.id = item.end_location_id
				this.tailwindZdInfo.city = item.end_name
				uni.navigateTo({
					url:`/pages/index/findHitchRide?tailwindQdInfo=${JSON.stringify(this.tailwindQdInfo)}&tailwindZdInfo=${JSON.stringify(this.tailwindZdInfo)}`
				})
				// uni.$emit('changePathCity', item.start_location_id, item.start_name, item.end_location_id, item.end_name)

				// uni.navigateBack()
			},
			// 切换字母
			changeLabel(item) {
				this.select = item
				// if (item == '全部') {
				// 	this.cityList = JSON.parse(JSON.stringify(this.orginCityList))
				// } else {
				// 	this.cityList = {
				// 		item: this.orginCityList[item]
				// 	}
				// }
				this.first=item
				if(item=='全部'){
					this.first=''
				}
					this.getCityList()
			},
			// 去选择详细地址
			changeValue(item) {
				const that = this
				if (that.type == 'start') {
					uni.$emit('update:tailwindQdInfo', item.id, item.name)
				} else {
					uni.$emit('update:tailwindZdInfo', item.id, item.name)
				}
				uni.navigateBack()
				// uni.chooseLocation({
				// 	latitude:item.lat-0,
				// 	longitude:item.lng-0,
				// 	success: function (res) {
				// 		if(that.type=='start'){
				// 			uni.$emit('update:tailwindQdInfo',item.id,item.name,res.latitude,res.longitude,res.name)
				// 		}else{
				// 			uni.$emit('update:tailwindZdInfo',item.id,item.name,res.latitude,res.longitude,res.name)
				// 		}
				// 		uni.navigateBack()
				// 	}
				// })
			},
			async getCityList() {
		
				var that = this
				var data = {
					page: 1,
					limit: 999,
					first:this.first
				}
				path(data)
					.then(res => {
						this.commonPathList = res.data.data
					})
			}
		}
	}
</script>

<style>
	.label {
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		padding: 0 30rpx;
		height: 64rpx;
		box-sizing: border-box;
		border: 2rpx solid #DDDDDD;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #333333;
		font-size: 26rpx;
	}

	.active {
		border: 2rpx solid #26D360;
		background: #26D360 !important;
		color: #FFFFFF !important;
	}
	.sItem {
		margin-top: 20rpx;
		margin-right: 20rpx;
		padding: 0rpx 14rpx;
		height: 64rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 2rpx solid #EEEEEE;
	}
	
	.sItem1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}
	
</style>